<template>
    <view class="container">
        <view class="search">
            <uni-forms-item label="收支类型：" :label-width="100">
                <!-- <uni-data-select v-model="transactionType" :localdata="transactionTypeList" @change="changeSearch">
                </uni-data-select> -->
				
				<picker @change="bindPickerChange" :value="transactionIndex" :range="transactionTypeList" range-key="name">
					<view style="display: flex; justify-content:space-between;align-items: center;">
						<view style="height:36px; line-height: 36px;">{{transactionTypeList[transactionTypeIndex].name}}</view>
						<view>
							<uni-icons type="bottom" size="20" color="#999"></uni-icons>
						</view>
					</view>
				</picker>
            </uni-forms-item>
        </view>
        <view id="datalist" class="wallet-detail">
            <view v-for="item in page.records" class="item">
                <view class="left">
					<view class="h">{{ item.title }}</view>
                    <view class="time">{{ item.createTime }}</view>
				</view>
                <view :class="'right '+(item.amount>0?'hov':'')">
                    <view class="amount">
                        {{ item.amount > 0 ? '+' + (item.amount / 100) : item.amount / 100 }}
                    </view>
                    <view class="balance">余额：{{ item.accountBalance / 100 }}</view>
                </view>
            </view>
        </view>
        <uni-load-more :status="status"/>
    </view>
</template>

<script>
import {WalletLogApi} from '@/api/user/WalletLogApi'

export default {
    data() {
        return {
            Config: this.$Config,
            Common: this.$Common,
            Auth: this.$Auth,
            ShareUtil: this.$ShareUtil,
            State: this.$store.state,
			Dict: this.$Dict,

            page: {
                total: 0,
                size: 10,
                current: 1,
                pages: 2,
                records: []
            },
            status: 'more',
            transactionTypeList: [{
				code:"",
				name:'全部'
			}],
            transactionType:"",
            transactionTypeIndex:0,
        }
    },
    onLoad(e) {
        this.transactionType = e.transactionType?parseInt( e.transactionType):""
        let that = this

		this.Dict.enums.transactionType.forEach(function(item,index){
			that.transactionTypeList.push(item)
			if(item.code === that.transactionType){
				that.transactionTypeIndex = index+1
			}
		})
		
		this.refreshPage()
    },
    onPullDownRefresh() {
        this.refreshPage()
    },
    onReachBottom() {
        if (this.page.current !== this.page.pages) {
            this.page.current++
            this.getPage()
        }
    },
    methods: {
        bindPickerChange(e){
            this.transactionTypeIndex = e.detail.value
			this.transactionType = this.transactionTypeList[this.transactionTypeIndex].code
            this.refreshPage()
        },
        refreshPage(){
            this.page.current = 1
            this.page.pages = 2
            this.getPage()
        },
        getPage() {
            let that = this
            let param = {
                pageIndex: this.page.current,
                pageSize: this.page.size,
                transactionType: this.transactionType
            };
            that.status = 'loading'

            WalletLogApi.getPage(param).then((response) => {
                if (that.page.current === 1) {
                    that.page = response
                } else {
                    that.page.records = that.page.records.concat(response.records)
                }

                that.page.records.forEach(function (item) {
                    item.updateTime = that.Common.timeFormat(item.updateTime, 2)
                })

                if (that.page.current === that.page.pages || that.page.pages === 0) {
                    that.status = 'noMore'
                } else {
                    that.status = 'more'
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
page { }
.container{background-color: #FFF;}
.search{ padding:10px; 
	/* #ifdef H5 */
	position: absolute;
	/* #endif */
	/* #ifdef MP-WEIXIN */
	position: fixed;
	/* #endif */
        left:0px; top:0px; background: #FFF; width:100%;
        box-shadow: 0px 0px 6px #999;}
::v-deep .search .uni-forms-item{ margin-bottom: 0px; }
::v-deep .search .uni-forms-item .uni-select{ border:none; }

/***红包明细***************************************************/
.wallet-detail {padding-top:70px;}
.wallet-detail .item{display: flex; border-bottom:1px solid #EEE; align-items: center;}
.wallet-detail .item .left {width:70%;padding:10px;}
.wallet-detail .item .left .h {font-size:16px;margin-bottom:5px;}
.wallet-detail .item .left .time {color:#CCC; font-size: 12px;}
.wallet-detail .item .right {width:30%;text-align:right; padding-right:10px;}
.wallet-detail .item .right .amount {font-size:18px;font-weight:bold; color:#E63E31;}
.wallet-detail .item .right .balance {font-size:12px;color:#999;margin-top:5px;}
.wallet-detail .item .hov {color:#FA8600;}

</style>
